<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>让坦克开起来</title>
		<style type="text/css">
			input{
				font-size:26px;
				margin-top: 20px;
			}
			body{
				background-image: url(images/grassland.png);
			}
			#mytank{
				position: absolute;
				left:10px;
				top:50px
			}
			#bigbody{
				width: 100%;
				height: 100%;
			}
		</style>
	</head>
	<body>		
		<div id="bigbody">
		<img id="mytank" src="images/right.png"/>
		</div>
	</body>
	<script>
		// 编写代码，让坦克能上下左右移动
		//199000932  刘澳琳
		body_w=document.documentElement.clientWidth ;      ////可见区域宽度
		// console.log(body_w);
		body_h=document.documentElement.clientHeight;    //可见区域高度
		// console.log(body_h);
		var mytank=document.getElementById("mytank");
		document.onkeydown =function(tank){
			var tank=window.event||tank;        //获取全局键盘敲击的数据//这种||的格式，如果两边是简单的数值型，那么就返回逻辑bool类型(同C一样)
			//如果是对象，那么，就会实现赋值和运行表达式的结果
			//判断其中的数据是上下左右之后先改变坦克的朝向（换图片），然后控制坦克在整个body里面的位置（总体思路）  也可以用switch简化一下代码，看自己愿意
			if(tank.keyCode=="38"){   //上
				mytank.setAttribute("src","images/up.png");
				mytank.style.top=Math.max(0,mytank.offsetTop-20)+"px";  //获取与mytank指向最近的盒子的向上距离，如果等于0，那么就取0（不动），此时offsetTop-5=-5，所以最终取0
				// console.log("up");
			}
			else if(tank.keyCode=="37"){    //左
				mytank.setAttribute("src","images/left.png");
				mytank.style.left=Math.max(0,mytank.offsetLeft-20)+"px";   //元素是一个指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的元素
				// console.log("left");
			}
			else if(tank.keyCode=="39"){   //右
				mytank.setAttribute("src","images/right.png");
				mytank.style.left=Math.min(body_w-85,mytank.offsetLeft+20)+"px";   //我去查看的原图属性，宽高就是如此，为了不让坦克跑出我们原本可见范围，所以最大移动值设定为离可见范围-坦克宽度
				// console.log("right");
			}
			else if(tank.keyCode=="40"){  //下
				mytank.setAttribute("src","images/down.png");
				mytank.style.top=Math.min(body_h-85,mytank.offsetTop+20)+"px";   //同上
				// console.log("down");
			}
		}
	</script>
</html>
